<template>
    <a-drawer
            title="权限设置"
            :visible="visible"
            :width="'40%'"
            :maskClosable="false"
            :confirmLoading="confirmLoading"
            @close="handleCancel"
    >
        <div class="drawer-view">
            <a-tree
                    v-if="treeData.length"
                    checkable
                    checkStrictly
                    :treeData="treeData"
                    v-model="checkedKeys"
                    :replaceFields="replaceFields"
                    :expandedKeys="expandedKeysss"
                    @check="onCheck"
                    @expand="onExpand"
            />
        </div>
        <div class="drawer-footer">
            <a-dropdown style="margin-right: 8px;" :trigger="['click']" placement="topCenter">
                <a-menu slot="overlay">
                    <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
                    <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
                    <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
                    <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
                </a-menu>
                <a-button>
                    树操作 <a-icon type="up" />
                </a-button>
            </a-dropdown>
            <a-button style="marginRight: 8px" @click="handleCancel">
                取消
            </a-button>
            <a-button @click="handleOk" type="primary">
                确定
            </a-button>
        </div>
    </a-drawer>
</template>
<script>
    import {menuAllList, resourceSave, roleResource} from "../../../../assets/api";
    export default {
        name: "auth",
        data(){
            return{
                visible:false,
                confirmLoading:false,
                replaceFields:{
                    title:'systemMenuName',
                    key:'id',
                    children:'childrenSystemMenuList'
                },
                checkedKeys:[],
                authId:'',
                expandedKeysss:[],
                allKeys:[],
                treeData:[]
            }
        },
        created(){
        },
        methods:{
            handleOk(){
                console.log(this.checkedKeys)
                resourceSave({param: {
                        systemMenuIdList:this.checkedKeys.checked?this.checkedKeys.checked:this.checkedKeys,
                        roleId:this.authId
                    }})
                    .then(result=>{
                        this.$message.success(result.resultMessage)
                        this.visible = false
                    })
            },
            handleCancel(){
                this.visible = false
            },
            setCheckValue(id){
                this.authId = id
                roleResource({param:id})
                    .then(result=>{
                        let res = []
                        result.result.map((item,index)=>{
                             res.push(item.systemMenuId)
                        })
                        this.expandedKeysss = res
                        this.checkedKeys = res
                    })
                    .then(_=>{
                        menuAllList({
                            pagingParam:{
                                pageSize:9999,
                                pageNumber:1
                            },
                            param:{}
                        })
                            .then(result=>{
                                this.treeData = result.result
                                this.allKeys = this.formatMenuList(this.treeData)
                            })
                    })
            },
            checkALL(){
                this.checkedKeys = this.allKeys
            },
            formatMenuList(data){
                let res = []
                data.map(item=>{
                    res.push(item.id)
                    if(item.childrenSystemMenuList){
                        if(item.childrenSystemMenuList.length>0){
                            res = [...res,...this.formatMenuList(item.children)]
                        }
                    }
                })
                return res
            },
            cancelCheckALL(){
                this.checkedKeys = []
            },
            expandAll(){
                this.expandedKeysss = this.allKeys
            },
            closeAll(){
                this.expandedKeysss = []
            },
            onCheck (o) {
                if(this.checkStrictly){
                    this.checkedKeys = o.checked;
                }else{
                    this.checkedKeys = o
                }
            },
            onExpand(expandedKeys){
                this.expandedKeysss = expandedKeys;
            }
        }
    }
</script>
<style scoped lang="less">
    .drawer-view{
        height: calc(100% - 50px);
        overflow-y: scroll;
    }
    .drawer-footer{
        width: 100%;
        height: 50px;
        border-top: 1px solid #e8e8e8;
        border-radius: 0 0 4px 4px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
</style>
